<template>
	<view class="content">
		<view class="nav_bar fl-center">
			<view class="navbar_text">
				备婚优选
			</view>
		</view>

		<view class="top_part">
			<view class="swiper">
				<u-swiper :list="swiperList" height="320rpx" :duration="500"></u-swiper>
			</view>
			<view class="xs_color">

			</view>
		</view>

		<view class="menu_list">
			<view class="menu_item" @click="toPage('/pages/public/apply_rz')">
				<view class="item_icon">
					<image src="../../static/index/menu1.png" mode=""></image>
				</view>
				<view class="item_text">
					入驻接单
				</view>
			</view>
			<view class="menu_item">
				<view class="item_icon">
					<image src="../../static/index/menu2.png" mode=""></image>
				</view>
				<view class="item_text">
					废客回流
				</view>
			</view>
			<view class="menu_item" @click="toPage('/pages/public/latestNews')">
				<view class="item_icon">
					<image src="../../static/index/menu3.png" mode=""></image>
				</view>
				<view class="item_text">
					最新资讯
				</view>
			</view>
			<view class="menu_item">
				<view class="item_icon">
					<image src="../../static/index/menu4.png" mode=""></image>
				</view>
				<view class="item_text">
					急速接单
				</view>
			</view>
		</view>

		<view class="njdsj">
			<view class="sj_title">
				<view class="title_l">
					最新接单商家
				</view>
				<view class="title_r">
					去接单
				</view>
			</view>
			<view class="njd_body sj_cont">
				<view class="njd_sj" v-for="(item,index) in njd_list" :key="index">
					<view class="sj_avatar">
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<view class="sj_info">
						<view class="sj_type">
							{{ item.sj_type }}
						</view>
						<view class="sj_detail">
							<view class="sj_name">
								{{ item.sj_name }}
							</view>
							<view class="sj_time">
								{{ item.sj_time }}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="njrsj">
			<view class="sj_title">
				<view class="title_l">
					最新加入商家
				</view>
				<view class="title_r">
					立即加入
				</view>
			</view>
			<view class="njr_body sj_cont">
				<view class="njr_list">
					<view class="njr_sj" v-for="(item,index) in njr_list" :key="index">
						<view class="avatar">
							<image :src="item.imgUrl" mode=""></image>
						</view>
						<view class="nsj_detail">
							<view class="nsj_info">
								<view class="info_l">
									<view class="nsj_name">
										{{ item.sj_name }}
									</view>
									<view class="isAuthentic fl-center">
										<view class="">
											<span v-if="item.isAuthentic">已实名</span>
										</view>
									</view>
								</view>
					
								<view class="join_time">
									{{ item.join_time }}
								</view>
							</view>
					
							<view class="location">
								<view class="location_icon fl-center">
									<image src="../../static/index/location.png" mode=""></image>
								</view>
								<view class="location_text">
									{{ item.location }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="hlsy">
			<view class="sj_title">
				<view class="title_l">
					最新商家废客回流收益
				</view>
				<view class="title_r">
					了解合作
				</view>
			</view>
			<view class="hl_body sj_cont">
				<view class="hl_list">
					<view class="njr_sj" v-for="(item,index) in hl_list" :key="index">
						<view class="avatar">
							<image :src="item.imgUrl" mode=""></image>
						</view>
						<view class="nsj_detail">
							<view class="nsj_info">
								<view class="info_l">
									<view class="nsj_name">
										{{ item.sj_name }}
									</view>
								</view>
							
								<view class="join_time">
									{{ item.join_time }}
								</view>
							</view>
							
							<view class="location1">
								<view class="location_icon1">
									废客回流：{{ item.fkhl }}
								</view>
								<view class="location_text1">
									回流收益：{{ item.hlsy }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					require('../../static/index/banner1.png'),
					require('../../static/index/banner1.png'),
					require('../../static/index/banner1.png'),
				],

				njd_list: [{
						imgUrl: '../../static/index/sj1.png',
						sj_type: '婚纱摄影',
						sj_name: '左慕婚纱摄影sjdodw',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj2.png',
						sj_type: '全家福',
						sj_name: '古典美摄影店',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj3.png',
						sj_type: '写真',
						sj_name: '古典美摄影店',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj4.png',
						sj_type: '婚纱礼服',
						sj_name: '古典美摄影店',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj5.png',
						sj_type: '婚纱摄影',
						sj_name: '古典美摄影店',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj6.png',
						sj_type: '婚纱摄影',
						sj_name: '左慕婚纱摄影sjdodw',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj7.png',
						sj_type: '婚纱摄影',
						sj_name: '左慕婚纱摄影sjdodw',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj8.png',
						sj_type: '婚纱摄影',
						sj_name: '左慕婚纱摄影sjdodw',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj9.png',
						sj_type: '婚纱摄影',
						sj_name: '左慕婚纱摄影sjdodw',
						sj_time: '1分钟前'
					},
					{
						imgUrl: '../../static/index/sj10.png',
						sj_type: '婚纱摄影',
						sj_name: '左慕婚纱摄影sjdodw',
						sj_time: '1分钟前'
					},
				],

				njr_list: [{
						imgUrl: '../../static/index/nsj1.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj2.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj3.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj4.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
					{
						imgUrl: '../../static/index/nsj5.png',
						sj_name: '左慕慕婚纱摄影',
						isAuthentic: true,
						location: '陕西省西安市雁塔区鱼化寨街道软件新城ifiwfbomf',
						join_time: '2小时前加入'
					},
				],

				hl_list: [
					{
						imgUrl: '../../static/index/sy1.png',
						sj_name: '柏拉图婚纱摄影',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy2.png',
						sj_name: '春藤婚典',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy3.png',
						sj_name: 'Tell Love求婚策划公司',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy2.png',
						sj_name: '春藤婚典',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy3.png',
						sj_name: 'Tell Love求婚策划公司',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy2.png',
						sj_name: '春藤婚典',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy3.png',
						sj_name: 'Tell Love求婚策划公司',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy2.png',
						sj_name: '春藤婚典',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy3.png',
						sj_name: 'Tell Love求婚策划公司',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy2.png',
						sj_name: '春藤婚典',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
					{
						imgUrl: '../../static/index/sy3.png',
						sj_name: 'Tell Love求婚策划公司',
						fkhl: '6个',
						hlsy: '￥1053.74',
						join_time: '1天前'
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #fff;
		padding-bottom: 60rpx;
	}

	.nav_bar {
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		left: 0;
		z-index: 9;
		/* #ifndef H5 */
		top: 40rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 0;

		/* #endif */
		.navbar_text {
			font-size: 36rpx;
			color: #000000;
		}
	}

	.fl-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top_part {
		width: 750rpx;
		// height: 517rpx;
		background: linear-gradient(159deg, #FFD9E7 0%, #FCDCE8 19%, #FFFFFF 53%);
		position: relative;
		/* #ifndef H5 */
		padding-top: 146rpx;
		/* #endif */
		/* #ifdef H5 */
		padding-top: 106rpx;
		/* #endif */
		box-sizing: border-box;
		z-index: 2;
		margin: 0 auto;

		.swiper {
			width: 690rpx;
			height: 320rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			margin: 0 auto;
			background-color: #eee;
		}

		.xs_color {
			width: 305rpx;
			height: 305rpx;
			background: #FFB86C;
			filter: blur(200rpx);
			position: absolute;
			right: -60rpx;
			top: -75rpx;
		}
	}

	.menu_list {
		width: 690rpx;
		height: 200rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menu_item {
		height: 129rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.item_icon {
			width: 88rpx;
			height: 88rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.item_text {
			font-size: 26rpx;
			color: #222222;
			margin-top: 12rpx;
		}
	}

	.njdsj {
		width: 690rpx;
		height: 595rpx;
		background: #FFF8FB;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin: 0 auto 30rpx;
		padding: 28rpx 20rpx 21rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.njrsj {
		width: 690rpx;
		height: 750rpx;
		background: #F6EEFA;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin: 0 auto 30rpx;
		padding: 28rpx 20rpx 21rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	
	.hlsy {
		width: 690rpx;
		// height: 750rpx;
		background: #EEFAF7;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin: 0 auto 30rpx;
		padding: 28rpx 20rpx 21rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.sj_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title_l {
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
		}

		.title_r {
			font-size: 26rpx;
			color: #FE609D;
		}
	}

	.njd_body {
		width: 650rpx;
		height: 470rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 26rpx auto 0;
	}

	.njd_sj {
		display: flex;
		align-items: center;
		height: 70rpx;
	}

	.sj_avatar {
		width: 70rpx;
		height: 70rpx;
		margin-right: 10rpx;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.sj_info {
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.sj_type {
			font-size: 24rpx;
			color: #222222;
		}

		.sj_detail {
			display: flex;
			align-items: center;

			.sj_name {
				width: 123rpx;
				font-size: 18rpx;
				color: #878A9B;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏超出容器的内容 */
				text-overflow: ellipsis;
				/* 用省略号表示被隐藏的内容 */
				margin-right: 5rpx;
			}

			.sj_time {
				font-size: 18rpx;
				color: #FE609D;
			}
		}
	}

	.njr_body {
		width: 650rpx;
		height: 625rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 12rpx 23rpx;
		box-sizing: border-box;
		overflow: hidden;
		// display: flex;
		// flex-direction: column;
		margin: 26rpx auto 0;
	}
	
	.njr_list {
		width: 100%;
		height: 100%;
		// background: #FFFFFF;
		// border-radius: 15rpx 15rpx 15rpx 15rpx;
		// padding: 12rpx 23rpx;
		// box-sizing: border-box;
		// overflow: hidden;
		display: flex;
		flex-direction: column;
		// margin: 26rpx auto 0;
		position: relative; /* 为了使用绝对定位 */  
		animation: scroll 10s linear infinite;
	}
	@keyframes scroll {  
	  0% {  
	    transform: translateY(0);  
	  }  
	  100% {  
	    transform: translateY(-100%); /* 根据容器高度和内容调整 */  
	  }  
	}
	
	.hl_body {
		width: 650rpx;
		height: 625rpx;
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 12rpx 23rpx;
		box-sizing: border-box;
		overflow: hidden;
		// display: flex;
		// flex-direction: column;
		margin: 26rpx auto 0;
	}
	.hl_list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative; /* 为了使用绝对定位 */  
		animation: scroll 10s linear infinite;
	}

	.njr_sj {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 120rpx;
		border-bottom: 1rpx solid #EDE9E9;
		flex-shrink: 0;
		
		.avatar {
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;
			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
		
	}
	
	.nsj_detail {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 520rpx;
		height: 70rpx;
		.nsj_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info_l {
				display: flex;
				align-items: center;
				.nsj_name {
					font-size: 28rpx;
					color: #222222;
					margin-right: 15rpx;
				}
				.isAuthentic {
					width: 80rpx;
					height: 30rpx;
					background: #FFF0E5;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 22rpx;
					color: #FF5A00;
				}
			}
			
			.join_time {
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.location {
			display: flex;
			align-items: center;
			.location_icon {
				width: 20rpx;
				height: 20rpx;
				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
			.location_text {
				width: 452rpx;
				font-size: 24rpx;
				color: #B3B3B3;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏超出容器的内容 */
				text-overflow: ellipsis;
				/* 用省略号表示被隐藏的内容 */
				margin-left: 10rpx;
			}
		}
	}
	
	.location1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 520rpx;
		font-size: 24rpx;
		color: #B3B3B3;
		.location_icon1 {
			
		}
		.location_text1 {
			
		}
	}
</style>